<template>
  <div class="layout">
    <el-container>
      <el-header class="d-flex align-items-center ">
        <a href="#" class="h5 mb-0 mr-auto text-light text-decoration-none">{{ $conf.logo }}</a>
        <el-menu
            :default-active="navBar.active|numToString"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item
              :index="index|numToString"
              v-for="(item,index) in navBar.list" :key="index">
            {{ item.name }}
          </el-menu-item>
          <el-submenu index="100">
            <template slot="title">
              <el-avatar size="small" :src="circleUrl"></el-avatar>
              snow
            </template>
            <el-menu-item index="100-1">修改</el-menu-item>
            <el-menu-item index="100-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container>
        <!--        侧边布局-->
        <el-aside width="200px">
          <el-menu
              :default-active="sildeMenusActive|numToString"
              @select="slideSelect">
            <el-menu-item :index="index|numToString" v-for="(item,index) in sildeMenus" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>

          </el-menu>

        </el-aside>
        <!--        主布局-->
        <el-main>
          <!--          面包屑导航-->
          <div class="border-bottom bread" v-if="bran.length>0">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: item.path }" v-for="(item,index) in bran" :key="index">{{ item.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!--          主内容-->
          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import common from "../common/mixins/common";

export default {
  mixins: [common],
  name: "layout",
  data() {
    return {
      navBar: {}
      ,
      bran: [],
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
    };
  },
  created() {
    this.navBar = this.$conf.navBar
    this.getRouterBran()
  },
  watch: {
    '$route'() {
      this.getRouterBran()
    }
  },
  computed: {
    sildeMenusActive: {
      get() {
        return this.navBar.list[this.navBar.active].subActive || 0
      },
      set(val) {
        this.navBar.list[this.navBar.active].subActive = val
      }

    },
    sildeMenus() {
      return this.navBar.list[this.navBar.active].submenu || []
    }
  },
  methods: {
    // 获取面包屑导航
    getRouterBran() {
      let b = this.$route.matched.filter(v => v.name);
      let arr = []
      b.forEach((v) => {
        if (v.name === 'index' || v.name === 'layout') return
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title
        })
      })
      if (arr.length > 0) {
        arr.unshift({name: 'index', path: '/index', title: '后台首页'})
      }
      this.bran = arr
      console.log(arr)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.navBar.active = key
    },
    slideSelect(key, keyPath) {
      console.log(key, keyPath);
      this.sildeMenusActive = key
    }
  }
}
</script>

<style scoped lang="scss">
.layout {
  & > .el-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    .el-header {
      background-color: #545c64;
    }

    .el-container {
      //height: 100%;
      .el-menu {
        height: 100%;
      }
    }
  }
}

.el-main {
  padding-left: 0;

  .bread {
    padding-bottom: 20px;
    padding-left: 20px;
  }
}

</style>
